<template>
    <div class="contents" v-resizeob="resizeEcharts">
        <div class="con-left1">
            <div class="left-top1">
                <img src="../assets/img/bj-1.png" alt="" class="bj-1">
                <img src="../assets/img/bj-2.png" alt="" class="bj-2">
                <img src="../assets/img/bj-3.png" alt="" class="bj-3">
                <img src="../assets/img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_6" class="pro-charts"></div>
            </div>
            <div class="left-center1">
                <img src="../assets/img/bj-1.png" alt="" class="bj-1">
                <img src="../assets/img/bj-2.png" alt="" class="bj-2">
                <img src="../assets/img/bj-3.png" alt="" class="bj-3">
                <img src="../assets/img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_1" class="pro-charts"></div>
            </div>
            <div class="left-down1">
                <img src="../assets/img/bj-1.png" alt="" class="bj-1">
                <img src="../assets/img/bj-2.png" alt="" class="bj-2">
                <img src="../assets/img/bj-3.png" alt="" class="bj-3">
                <img src="../assets/img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_2" class="pro-charts"></div>
            </div>
        </div>
        <div class="con-center">
            <div ref="chartsDOM" class="pro-charts">
            </div>
        </div>
        <div class="con-right1">
            <div class="right-top">
                <img src="../assets/img/bj-1.png" alt="" class="bj-1">
                <img src="../assets/img/bj-2.png" alt="" class="bj-2">
                <img src="../assets/img/bj-3.png" alt="" class="bj-3">
                <img src="../assets/img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_3" class="pro-charts"></div>
            </div>
            <div class="right-center">
                <img src="../assets/img/bj-1.png" alt="" class="bj-1">
                <img src="../assets/img/bj-2.png" alt="" class="bj-2">
                <img src="../assets/img/bj-3.png" alt="" class="bj-3">
                <img src="../assets/img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_4" class="pro-charts"></div>
            </div>
            <div class="right-down">
                <img src="../assets/img/bj-1.png" alt="" class="bj-1">
                <img src="../assets/img/bj-2.png" alt="" class="bj-2">
                <img src="../assets/img/bj-3.png" alt="" class="bj-3">
                <img src="../assets/img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_5" class="pro-charts"></div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import getChangZhimap from "../api/getChangZhiMap"

export default {
    name: "prodectScreen",
    data() {
        return {
            myChart: null,
            myChart1: null,
            myChart2: null,
            myChart3: null,
            myChart4: null,
            myChart5: null,
            myChart6: null,
            fullScreen: false,
        };
    },
    mounted() {
        // 中间地图
        // 初始化统计图对象
        this.myChart = echarts.init(this.$refs["chartsDOM"]);
        // 显示 loading 动画
        this.myChart.showLoading();
        // 再得到数据的基础上，进行地图绘制
        getChangZhimap.then(res => {
            // 得到结果后，关闭动画
            this.myChart.hideLoading();
            // 注册地图(数据放在axios返回对象的data中哦)
            echarts.registerMap('CZ', res.data);
            var option = {
                visualMap: {
                    min: 1,
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    }
                },
                tooltip: {
                    formatter: function (params) {
                        console.log(params, 'sssssssssss');
                        return `${params.name}设备量：${params.value}`
                    }
                },
                series: [
                    {
                        name: '长治地图',
                        type: 'map',
                        map: 'CZ',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
                        label: {
                            show: true
                        },
                        data: [
                            { name: '武乡县', value: 251 },
                            { name: '沁县', value: 310 },
                            { name: '沁源县', value: 150 },
                            { name: '屯留区', value: 200 },
                            { name: '襄垣县', value: 198 },
                            { name: '黎城县', value: 70 },
                            { name: '潞城区', value: 40 },
                            { name: '潞州区', value: 60 },
                            { name: '长子县', value: 90 },
                            { name: '上党区', value: 110 },
                            { name: '壶关县', value: 160 },
                            { name: '平顺县', value: 180 },
                        ]
                    },
                ]
            };
            this.myChart.setOption(option);
        })

        // 左一饼图
        this.myChart6 = echarts.init(document.getElementById("echarts_6"));
        var option6 = {
            title: {
                textStyle: {
                    color: '#fff',
                    fontSize: '16px',
                    fontWeight: 'normal'
                }
            },
            legend: {
                top: 'bottom',
                textStyle: {
                    color: '#f2f2f2',
                    fontWeight: 'normal'
                }
            },
            grid: {
                bottom: "15%",
                containLabel: true
            },
            series: [
                {
                    // name: 'Nightingale Chart',
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '50%'],
                    // roseType: 'area',
                    itemStyle: {
                        // borderRadius: 8
                    },
                    data: [
                        { value: 3, name: '供货厂商' },
                        { value: 4, name: '产品种类' },
                        { value: 63, name: '产品数量' },
                    ]
                }
            ]
        };
        option6 && this.myChart6.setOption(option6);

        // 左二饼图
        this.myChart1 = echarts.init(document.getElementById("echarts_1"));
        var option1 = {
            title: {
                text: '产品占比',
                left: '39%',
                textStyle: {
                    color: '#fff',
                    fontSize: '16px',
                    fontWeight: 'normal'
                }
            },
            legend: {
                top: 'bottom',
                textStyle: {
                    color: '#f2f2f2',
                    fontWeight: 'normal'
                }
            },
            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [20, 80],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: [
                        { value: 40, name: '微型计算机' },
                        { value: 38, name: '台式计算机' },
                        { value: 32, name: '同方台式计算机' },
                    ]
                }
            ]
        };
        option1 && this.myChart1.setOption(option1);

        // 左三柱状图
        this.myChart2 = echarts.init(document.getElementById("echarts_2"));
        const rawData = [
            [1, 3, 3, 3, 3, 3, 3, 1, 1, 2, 1],
            [3, 1, 1, 1, 7, 2, 2, 2, 3, 4, 1],
            [2, 1, 1, 2, 2, 3, 3, 3, 4, 5, 2],
        ];
        const grid = {
            right: 40,
            top: 50,
            bottom: 50
        };
        const totalData = [];
        for (let i = 0; i < rawData[0].length; ++i) {
            let sum = 0;
            for (let j = 0; j < rawData.length; ++j) {
                sum += rawData[j][i];
            }
            totalData.push(sum);
        }
        const series = [
            '微型计算机',
            '台式计算机',
            '同方台式计算机',
        ].map((name, sid) => {
            return {
                name,
                type: 'bar',
                stack: 'total',
                barWidth: '60%',
                label: {
                    show: true,
                    formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
                },
                data: rawData[sid].map((d, did) =>
                    totalData[did] <= 0 ? 0 : d / totalData[did]
                )
            };
        });
        var option2 = {
            title: {
                text: '各区县产品情况',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: '16px',
                    fontWeight: 'normal'
                }
            },
            grid,
            legend: {
                top: 'bottom',
                textStyle: {
                    color: '#f2f2f2',
                    fontWeight: 'normal'
                }
            },
            // grid,
            yAxis: {
                type: 'value'
            },
            xAxis: {
                type: 'category',
                data: ['武乡', '沁县', '沁源', '屯留区', '襄垣', '黎城', '潞城区', '潞州区', '长子', '上党区', '壶关', '平顺']
            },
            series
        };
        option2 && this.myChart2.setOption(option2);


        // 右一柱状图
        this.myChart3 = echarts.init(document.getElementById("echarts_3"));
        var option3 = {
            title: {
                text: '厂商供货情况',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: '16px',
                    fontWeight: 'normal'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                right: 40,
                top: 50,
                bottom: 50
            },
            legend: {
                data: ['微型计算机', '台式计算机', '同方台式计算机'],
                top: 'bottom',
                textStyle: {
                    color: '#f2f2f2',
                    fontWeight: 'normal'
                }
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: { show: false },
                    data: ['北方自动控制技术研究所', '同方']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '微型计算机',
                    type: 'bar',
                    barGap: '10%',
                    barWidth: '16%',
                    label: true,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [3, 2, 1, 4, 4]
                },
                {
                    name: '台式计算机',
                    type: 'bar',
                    label: true,
                    barWidth: '16%',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [2, 2, 1, 4, 2]
                },
                {
                    name: '同方台式计算机',
                    type: 'bar',
                    barWidth: '16%',
                    label: true,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [1, 2, 1, 4, 5]
                },
            ]
        };
        option3 && this.myChart3.setOption(option3);

        // 右二折线图
        this.myChart4 = echarts.init(document.getElementById("echarts_4"));
        var option4 = {
            title: {
                text: '交付设备趋势',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: '16px',
                    fontWeight: 'normal'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['台式计算机', '微型计算机', '同方台式计算机'],
                top: 'bottom',
                textStyle: {
                    color: '#f2f2f2',
                    fontWeight: 'normal'
                }
            },
            grid: {
                bottom: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['2020', '2021', '2022', '2023']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '台式计算机',
                    type: 'line',
                    stack: 'Total',
                    data: [12, 13, 10, 13, 90, 23, 21]
                },
                {
                    name: '微型计算机',
                    type: 'line',
                    stack: 'Total',
                    data: [22, 18, 19, 23, 29, 33, 31]
                },
                {
                    name: '同方台式计算机',
                    type: 'line',
                    stack: 'Total',
                    data: [15, 23, 20, 15, 19, 33, 41]
                }
            ]
        };
        option4 && this.myChart4.setOption(option4);


        // 右三柱图
        this.myChart5 = echarts.init(document.getElementById("echarts_5"));
        var option5 = {
            title: {
                text: '各单位设备情况',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: '16px',
                    fontWeight: 'normal'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['产品数量'],
                top: 'bottom',
                textStyle: {
                    color: '#f2f2f2',
                    fontWeight: 'normal'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: ['长子县第一中学', '壶关县第一中学', '襄垣一中', '长子县第一中学', '沁县第一中学', '长治市第一小学']
            },
            series: [
                {
                    name: '2011',
                    type: 'bar',
                    data: [4, 3, 1, 3, 4, 4, 5]
                },
            ]
        };
        option5 && this.myChart5.setOption(option5);
    },
    methods: {
        resizeEcharts() {
            console.log("sssss");
            this.myChart.resize()
            this.myChart1.resize()
            this.myChart2.resize()
            this.myChart3.resize()
            this.myChart4.resize()
            this.myChart5.resize()
            this.myChart6.resize()
        },
        // handleFullScreen() {
        //     // 获取需要全屏展示的div
        //     let fullarea = document.getElementsByClassName('body1')[0]

        //     if (!document.fullscreenElement) {
        //         // 全屏
        //         fullarea.requestFullscreen();
        //         this.fullScreen = true
        //     } else {
        //         // 退出全屏
        //         if (document.exitFullscreen) {
        //             document.exitFullscreen();
        //             this.fullScreen = false
        //         }
        //     }
        // },
        // toggleComponent(componentName) {
        //     this.currentComponent = componentName; // 更新当前展示的组件名称
        // }

    },
}
</script>

<style lang='less' scoped>
@import '../css/proScreen.css';
</style>../api/request